<template>
	<view class="container" style="margin-bottom: 20rpx;">
		<view class="userBg statusBarHeight">
			<image :src="sellerObj.avatar" class="avatar" mode=""></image>

			<view class="userInfo">
				<view class="left">
					<view class="name">
						{{ sellerObj.name }}
					</view>

					<view class="telephone">
						{{ sellerObj.phone }}
					</view>
					<view class="telephone">
						{{ sellerObj.roleName }}
					</view>
				</view>
				<image @click="showQrCode" class="right" src="../../../static/image/home_icon_ewm.png" mode="">
				</image>
			</view>
		</view>
		<view class="Wrapper" style="margin-top: -65rpx">
			<view class="titleWrapper">
				<view class="title"> 客户数据 </view>
				<view class="more" @click="gotoStatistic">
					更多
					<view class="img"> </view>
				</view>
			</view>
			<view class="dataWrapper">

				<view class="item" @click="gotoCustomer(0)">
					<view class="top"> 今日访客 </view>
					<view class="middle">
						{{ statisticObj.newVisitorsToday }}
					</view>
					<view class="bottom">
						昨日{{ statisticObj.newVisitorsYesterday }}
					</view>
				</view>

				<view class="item" @click="gotoCustomer(1)">
					<view class="top"> 今日获客 </view>
					<view class="middle">
						{{ statisticObj.authedVisitorsToday }}
					</view>
					<view class="bottom">
						昨日{{ statisticObj.authedVisitorsYesterday }}
					</view>
				</view>
			</view>
		</view>

		<view class="Wrapper" style="margin-top: 20rpx">
			<view class="titleWrapper">
				<view class="title"> 客户动态 </view>
				<view class="more" @click="gotoCustomerLog">
					更多动态
					<view class="img"> </view>
				</view>
			</view>
			<view class="logWrapper">
				<template v-if="logList.length >= 1">
					<image class="left" :src="logList[0].avatar || '@/static/image/icon_avatar.png'" mode=""></image>
					<view class="right">
						<view class="top">
							<view class="nickname text-1line-ellipsis">
								{{ logList[0].nickname || "" }}
							</view>
							<view class="date">
								{{ logList[0].createTime || "" }}
							</view>
						</view>
						<view class="bottom text-1line-ellipsis">
							{{ logList[0].content || "" }}
						</view>
					</view>
				</template>
				<view v-else style="
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 26rpx;
						width: 100%;
						color: #888;
					">
					暂无记录
				</view>
			</view>
		</view>

		<view class="Wrapper" style="margin-top: 20rpx">
			<view class="titleWrapper">
				<view class="title"> 拓客工具 </view>
				<view class="more"> </view>
			</view>
			<view v-if="showToolList && showToolList.length > 0" :class="{
					toolContainerOpen: isShowAllTool,
					toolContainerClose: !isShowAllTool,
				}" class="toolContainer">
				<template v-for="(item, index) in showToolList">
					<view v-if="index < 7 || isShowAllTool" class="item" :key="index" @click="gotoTool(item)">
						<image class="img" :src="item.icon" mode=""> </image>
						{{ item.name }}
					</view>
				</template>
				<template v-if="showToolList.length > 8">
					<view v-if="isShowAllTool" class="upWrapper" @click="isShowAllTool = false">
						收起
						<image class="img" src="@/static/image/icon_up.png" mode=""></image>
					</view>
					<view v-if="!isShowAllTool" class="item" @click="isShowAllTool = true">
						<image class="img" src="@/static/image/icon_tool_more.png" mode="">
						</image>
						其他
					</view>
				</template>
			</view>
			<view v-else class="toolContainer">
				<view style="
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 26rpx;
						width: 100%;
						color: #888;
					">
					暂无记录
				</view>
			</view>
		</view>
		<view class="Wrapper" v-if="todoListItem.show&&todoListItem.children.length>0" style="margin-top: 20rpx">
			<view class="titleWrapper">
				<view class="title"> 待办事项 </view>
				<view class="more"> </view>
			</view>
			<view class="toDoContainer">
				<template v-for="(item, index) in todoListItem.children">
					<view v-if="todoListStatVO && todoListStatVO[item.code] > 0" class="item" style="position: relative"
						:key="index" @click="gotoTodoListItem(item)">
						<image class="img" :src="item.icon" mode=""> </image>
						{{ item.name }}
						<u-badge type="error" :absolute="true"
							:value="(todoListStatVO && todoListStatVO[item.code]) || 0" :offset="[-10, 30]">
						</u-badge>
					</view>
				</template>
			</view>
		</view>
		<!-- <view class="" style="height: 200rpx"> </view> -->
		<popupSignIn v-model="isShowSignIn" :cardObj="cardObj"></popupSignIn>
		<popupCard v-model="cardObj.isShowCard" :cardObj="cardObj"></popupCard>
		<popupPhoneAuth v-model="isShowPhoneAuth"></popupPhoneAuth>

		<popupCheckOut v-model="isShowCheckOut" @onCheckOut="onCheckOut" :checkOutObj="checkOutObj">
		</popupCheckOut>

		<popupAddCustomer v-model="isShowAddCustomer"></popupAddCustomer>
	</view>
</template>

<script>
	let timeId = null;
	let that = this;
	import {
		mapState,
		mapMutations,
		mapActions
	} from "vuex";
	import popupSignIn from "../../../components/popupSignIn/index.vue";
	import popupCard from "../../../components/popupCard/index.vue";
	import popupPhoneAuth from "@/components/popupPhoneAuth/popupPhoneAuth.vue";
	import popupAddCustomer from "../../../components/popupAddCustomer/index.vue";
	import popupCheckOut from "@/components/popupCheckOut/index.vue";

	let systemInfo = uni.getSystemInfoSync();
	const api = require("@/static/js/api.js");
	const utils = require("@/static/js/utils.js");
	export default {
		data() {
			return {
				logList: [],
				statisticObj: {
					authedVisitorsToday: 0,
					authedVisitorsYesterday: 0,
					newVisitorsToday: 0,
					newVisitorsYesterday: 0,
				},
				checkOutId: "",
				todoListStatVO: {},
				cardObj: {
					isShowCard: false,
					qrCode: "",
					title: " ",
					content: " ",
					introduce: " ",
				},
				isShowPhoneAuth: false,
				isShowSignIn: false,
				isShowAddCustomer: false,

				checkOutObj: {},
				isShowCheckOut: false,
				todoListItem: {
					show: false,
					code: "todoList",
					children: [{
							icon: "/static/image/icon_todoList1.png",
							name: "分配待跟进",
							code: "newAllocateUser",
							url: "/pages/shop/customer/customers?filterType=newAllocate&filterTitle=新分配客户",
						},
						{
							icon: "/static/image/icon_todoList2.png",
							name: "三日待跟进",
							code: "threeDayLeft",
							url: "/pages/shop/customer/customers?filterType=protectDayLeftThreeDays&filterTitle=三日内将逾期",
						},
						{
							icon: "/static/image/icon_todoList3.png",
							name: "今日待跟进",
							code: "oneDayLeft",
							url: "/pages/shop/customer/customers?filterType=protectDayLeftOneDays&filterTitle=今日将逾期",
						},
						{
							icon: "/static/image/icon_todoList4.png",
							name: "逾期客户",
							code: "invalidUser",
							url: "/pages/shop/customer/customers?filterType=notInProtectDay&filterTitle=逾期客户",
						},
						{
							icon: "/static/image/icon_todoList5.png",
							name: "今天待回访",
							code: "toFollowUser",
							url: "/pages/shop/customer/customers?filterType=ToAddFollowLog&filterTitle=今天待回访",
						},
					],
				},
				toolList: [{
						icon: "/static/image/icon_tool_4.png",
						name: "发抖音",
						url: "/pages/shop/tiktok/index",
						show: false,
						code: "post_douyin",
					},
					{
						icon: "/static/image/icon_tool_3.png",
						name: "发笔记",
						url: "/pages/shop/note/index",
						show: false,
						code: "post_note",
					},


					{
						icon: "/static/image/icon_tool_9.png",
						name: "发物料",
						url: "/pages/shop/material/index",
						show: false,
						code: "material",
					},
					{
						icon: "/static/image/icon_tool_7.png",
						name: "发名片",
						url: "/pages/shop/myCard/index",
						show: false,
						code: "card",
					},
					{
						icon: "/static/image/icon_tool_5.png",
						name: "发海报",
						url: "/pages/shop/poster/index",
						show: false,
						code: "poster",
					},
					{
						icon: "/static/image/icon_tool_6.png",
						name: "发活动",
						url: "/pages/shop/activity/index",
						show: false,
						code: "activity",
					},
					{
						icon: "/static/image/icon_tool_8.png",
						name: "发文章",
						url: "/pages/shop/article/index",
						show: false,
						code: "article",
					},
					{
						icon: "/static/image/icon_tool_1.png",
						name: "VR带看",
						url: "/pages/shop/web/webShare",
						show: false,
						code: "vr",
					},
					{
						icon: "/static/image/icon_tool_11.png",
						name: "公池分配",
						url: "/pages/shop/customer/allocate",
						show: false,
						code: "allocate",
					},
					{
						icon: "/static/image/icon_tool_14.png",
						name: "报备客户",
						url: "",
						show: false,
						code: "addCustomer",
					},
					{
						icon: "/static/image/icon_tool_2.png",
						name: "报备审核",
						url: "/pages/shop/customer/audit",
						show: false,
						code: "audit",
					},
					{
						icon: "/static/image/icon_tool_13.png",
						name: "核销",
						url: "",
						show: false,
						code: "check",
					},
					{
						icon: "/static/image/icon_tool_10.png",
						name: "房贷计算器",
						url: "/pages/calculator/index/index",
						show: false,
						code: "calculator",
					},
					{
						icon: "/static/image/icon_tool_15.png",
						name: "客户查重",
						url: "/pages/shop/customer/search",
						show: false,
						code: "search",
					},
					{
						icon: "/static/image/icon_tool_6.png",
						name: "顾客签到",
						url: "",
						show: false,
						code: "visitCheck",
					},
				],
				showToolList: [],

				isShowAllTool: false,

				navBackCss: {
					top: "100rpx",
				},
				headerContainerCss: {
					paddingTop: "60rpx",
				},
			};
		},
		computed: {
			...mapState({
				hasLogin: (state) => state.userInfo.hasLogin,
				isAuthPhone: (state) => state.userInfo.isAuthPhone,
				isAuthUserInfo: (state) => state.userInfo.isAuthUserInfo,
				isSeller: (state) => state.userInfo.isSeller,
				sellerObj: (state) => state.userInfo.sellerObj,
				buyerObj: (state) => state.userInfo.buyerObj,
				shopInfo: (state) => state.userInfo.shopInfo,
				authTiktokInfo: state => state.userInfo.authTiktokInfo,
				authTiktokPermission: state => state.userInfo.authTiktokPermission,
			}),
		},
		components: {
			popupCard,
			popupPhoneAuth,
			popupSignIn,
			popupAddCustomer,
			popupCheckOut,
		},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			isOnShow: {
				type: Boolean,
				default: false,
			},
		},
		watch: {
			value: {
				handler: function observer(val) {
					var _this = this;
					if (val) {
						_this.selfShow = true;
						_this.closeShow = false;
						setTimeout(() => {
							console.log("@@@@@closeshow");
							_this.closeShow = true;
						}, 2000);
					} else {
						_this.selfShow = false;
					}
				},
				immediate: true,
			},
			isShowAddCustomer: {
				handler: function observer(val) {},
				immediate: true,
			},
			isOnShow: {
				handler: function observer(val) {
					if (val) {
						this.statTodoList();
					}
				},
				immediate: true,
			},
		},
		created() {

		},
		mounted() {
			that = this;
			that.initToolList();
			that.initToDoList();
			console.log("systemInfo:", systemInfo);
			if (systemInfo.statusBarHeight) {
				this.navBackCss.top = systemInfo.statusBarHeight + 2 + "px";
				this.headerContainerCss.paddingTop = systemInfo.bottom + "px";
			} else {}
			this.getAllCustomerLogList();
			this.getTodoList();
			this.getStatisticRecent();
		},
		activated() {},
		methods: {
			...mapActions([
				"interceptorLoginInfoAuth",
				"interceptorLoginPhoneAuth",
				"updateUserInfo",
			]),
			initToolList() {
				this.showToolList.splice(0, this.showToolList.length);
				for (var j in this.toolList) {
					for (var i = 0; i < this.shopInfo.tools.length; i++) {
						if (this.toolList[j].code == this.shopInfo.tools[i].code) {
							this.toolList[j].show = this.shopInfo.tools[i].isShow;
							if (this.toolList[j].show) {
								this.showToolList.push(this.toolList[j]);
							}

						}
					}
				}
				this.isShowAllTool = false;
				// console.log("showToolList:", this.toolList);
			},

			initToDoList() {
				for (var i = 0; i < this.shopInfo.tools.length; i++) {
					if (this.todoListItem.code == this.shopInfo.tools[i].code) {
						this.todoListItem.show = this.shopInfo.tools[i].isShow;
					}
				}
			},

			getStatisticRecent() {
				api.getStatisticRecent().then((res) => {
					console.log("getStatisticRecent", res);
					if (res.success) {
						that.statisticObj.authedVisitorsToday =
							res.data.authedVisitorsToday || 0;
						that.statisticObj.authedVisitorsYesterday =
							res.data.authedVisitorsYesterday || 0;
						that.statisticObj.newVisitorsToday = res.data.newVisitorsToday || 0;
						that.statisticObj.newVisitorsYesterday =
							res.data.newVisitorsYesterday || 0;
					}
				});
			},

			getAllCustomerLogList() {
				api.getAllCustomerLogList().then((res) => {
					console.log(res);
					if (res.code == 0) {
						that.logList = res.data;
					}
				});
			},

			getTodoList() {
				api.statTodoList().then((res) => {
					console.log("statTodoList", res.data);
					if (res.success) {
						that.todoListStatVO = res.data || {};
					}
				});
			},

			showQrCode() {
				this.cardObj.qrCode = this.sellerObj.qrcodeImage || "";
				this.cardObj.title = this.sellerObj.post || "顾问";
				this.cardObj.content = "姓名";
				this.cardObj.introduce = this.sellerObj.name || "";
				this.cardObj.isShowCard = true;
			},

			gotoCheckOut() {
				wx.scanCode({
					onlyFromCamera: true,
					success(res) {
						console.log(res);
						if (res.errMsg == "scanCode:ok") {
							that.checkOutId = res.result;
							api
								.getCheckOutInfo({
									param: {
										winCode: that.checkOutId,
									},
								})
								.then((res) => {
									console.log(res);
									if (res.success) {
										that.checkOutObj = res.data;
										that.isShowCheckOut = true;
									} else {
										uni.showModal({
											title: "提示",
											content: "核销失败：" + res.message,
											showCancel: false,
											success: function(res1) {
												if (res.confirm) {
													console.log("用户点击确定");
												} else if (res.cancel) {
													console.log("用户点击取消");
												}
											},
										});
									}
								});
						}
					},
				});
			},

			onCheckOut() {
				api.checkOffActivity({
					interfaceName: that.checkOutId,
					param: {},
				}).then((res) => {
					console.log(res);
					if (res.success) {
						that.isShowCheckOut = false;
						uni.showModal({
							title: "提示",
							content: "核销成功",
							showCancel: false,
							success: function(res1) {
								if (res.confirm) {
									console.log("用户点击确定");
								} else if (res.cancel) {
									console.log("用户点击取消");
								}
							},
						});
					} else {
						that.isShowCheckOut = false;
						uni.showModal({
							title: "提示",
							content: "核销失败：" + res.message,
							showCancel: false,
							success: function(res1) {
								if (res.confirm) {
									console.log("用户点击确定");
								} else if (res.cancel) {
									console.log("用户点击取消");
								}
							},
						});
					}
				});
			},

			gotoStatistic() {
				this.$emit("onTabBarChange", 3);
			},
			gotoCustomerLog() {
				console.log("gotoCustomerLog");
				uni.navigateTo({
					url: "/pages/shop/customer/customerLog",
				});
			},

			gotoTodoListItem(item) {
				uni.navigateTo({
					url: item.url,
				});
			},

			gotoTool(item) {
				if (item.code == "check") {
					that.gotoCheckOut();
				} else if (item.code == "visitCheck") {
					that.isShowSignIn = true;
				} else if (item.code == "addCustomer") {
					that.isShowAddCustomer = true;
				} else if (item.code == "card") {
					uni.navigateTo({
						url: item.url + "?id=" + this.sellerObj.uuid,
					});
				} else if (item.code == 'post_douyin') {
					//== 未授权直接跳转授权页面
					if (this.authTiktokInfo && this.authTiktokPermission) {
						uni.navigateTo({
							url: item.url,
						});
					} else {	
						// 首次授权未刷新信息
						api.getUserInfo().then(res => {
							console.log("getUserInfo", res)
							if (res.success) {
								that.setUserInfo(res.data)
								if (that.authTiktokInfo && that.authTiktokPermission) {
									uni.navigateTo({
										url: item.url,
									});
								}else{
									uni.navigateTo({
										url: "/pages/shop/tiktok/authTiktokManage",
									});
								}								
							}
						}).catch(err => {
					
						})					
					}
				} else {
					uni.navigateTo({
						url: item.url,
					});
				}
			},
			gotoCustomer(index) {
				uni.navigateTo({
					url: "/pages/shop/customer/index?type=" + index,
				});
			}
		},
	};
</script>

<style lang="scss">
	.container {
		width: 100%;
		background-color: #f3f3f3;
	}

	.userBg {
		width: 750rpx;
		height: 302rpx;
		background-size: 100% 100%;
		background-image: url(@/static/image/bg_tabbar_home.png);
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-bottom: 65rpx;

		.avatar {
			width: 130rpx;
			height: 130rpx;
			margin-left: 40rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: #fff;
		}

		.login {
			width: 174rpx;
			height: 64rpx;
			margin-left: 28rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #ff7927;
			line-height: 64rpx;
			text-align: center;
		}

		.userInfo {
			width: 580rpx;
			margin-left: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				.name {
					font-size: 34rpx;
					line-height: 34rpx;
					font-weight: bold;
					color: #ffffff;
				}

				.telephone {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #fff1d6;
					margin-top: 22rpx;
				}
			}

			.right {
				box-sizing: content-box;
				width: 44rpx;
				height: 44rpx;
				padding: 40rpx;
			}
		}
	}

	.Wrapper {
		width: 702rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-left: 24rpx;

		.titleWrapper {
			box-sizing: border-box;
			padding: 0 30rpx;
			width: 100%;
			height: 65rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ececec;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				font-stretch: normal;
				line-height: 28rpx;
				letter-spacing: 0rpx;
				color: #191919;
			}

			.more {
				display: flex;
				font-size: 24rpx;
				font-stretch: normal;
				line-height: 22rpx;
				letter-spacing: 0rpx;
				color: #959595;
				align-items: center;

				.img {
					margin-left: 12rpx;
					width: 8rpx;
					height: 16rpx;
					background-size: 100% 100%;
					background-image: url(@/static/image/icon_more.png);
				}
			}
		}
	}

	.dataWrapper {
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		box-sizing: border-box;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.top {
				font-size: 24rpx;
				font-stretch: normal;
				line-height: 24rpx;
				letter-spacing: 1rpx;
				color: #222;
				margin-bottom: 13rpx;
			}

			.middle {
				font-size: 40rpx;
				font-weight: bold;
				font-stretch: normal;
				line-height: 40rpx;
				letter-spacing: 2rpx;
				color: #2ca8c8;
				margin-bottom: 13rpx;
			}

			.bottom {
				font-size: 24rpx;
				font-stretch: normal;
				line-height: 30rpx;
				letter-spacing: 1rpx;
				color: #959595;
			}
		}
	}

	.logWrapper {
		width: 100%;
		box-sizing: border-box;
		padding: 24rpx 30rpx;
		display: flex;
		align-items: center;

		.left {
			width: 78rpx;
			height: 78rpx;

			margin-right: 30rpx;
			border-radius: 50%;
		}

		.right {
			width: 550rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.nickname {
					font-size: 28rpx;
					font-stretch: normal;
					line-height: 28rpx;
					letter-spacing: 0rpx;
					color: #191919;
					width: 300rpx;
				}

				.date {
					font-size: 22rpx;
					font-stretch: normal;
					line-height: 22rpx;
					letter-spacing: 0rpx;
					color: #adadad;
				}
			}

			.bottom {
				font-size: 24rpx;
				font-stretch: normal;
				line-height: 24rpx;
				letter-spacing: 0rpx;
				color: #2ca8c8;
				margin-top: 21rpx;
			}
		}
	}

	// .toolContainerOpen{
	// 	max-height: 800rpx;
	// }
	// .toolContainerClose{
	// 	max-height: 400rpx;
	// }

	.toolContainer {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		// transition: 500ms max-height ease;
		.item {
			width: 170rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;

			.img {
				width: 58rpx;
				height: 48rpx;
				color: #333333;
				margin-bottom: 14rpx;
			}
		}

		.upWrapper {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 40rpx;
			color: #888;
			font-size: 22rpx;

			.img {
				width: 18rpx;
				height: 13rpx;
				margin-left: 10rpx;
			}
		}
	}

	.toDoContainer {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.item {
			width: 170rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;

			.img {
				width: 52rpx;
				height: 52rpx;
				color: #333333;
				margin-bottom: 14rpx;
			}
		}
	}

	.checkOutContainer {
		width: 650rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			width: 100%;
			font-size: 40rpx;
			font-weight: bold;
			color: #ffffff;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			border-bottom: 1px solid #f3f3f3;
			letter-spacing: 10rpx;
			background-color: #1890ff;
		}

		.content {
			display: flex;
			width: 650rpx;
			padding: 15rpx 30rpx 15rpx 30rpx;
			border-bottom: 1px solid #f3f3f3;

			.left {
				width: 150rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.right {
				width: 440rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.btn {
			height: 80rpx;
			width: 300rpx;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			border-radius: 40rpx;
			background-color: #1890ff;
			color: #ffffff;
			text-align: center;
			line-height: 80rpx;
			letter-spacing: 10rpx;
			font-size: 32rpx;
		}
	}

	.gobackHomeWrapper {
		border-radius: 30rpx;
		padding: 0 20rpx;
		height: 60rpx;
		z-index: 100;
		position: fixed;
		left: 40rpx;
		top: 120rpx;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.6);
		color: #ffffff;
	}
</style>